<template>
	<view class="picture-frame">
		<view class="submit-container">
			<el-form :model="mpInfo" ref="form" v-loading="uploading">
				<el-input v-model="mpInfo.name" placeholder="名称"></el-input>
				<el-input v-model="mpInfo.cid" placeholder="排序cid"></el-input>
				<el-input v-model="mpInfo.wxAppid" placeholder="微信appid"></el-input>
				<el-input v-model="mpInfo.qqAppid" placeholder="QQappid"></el-input>
				<el-form-item label="封面图" label-width="100px" style="margin-bottom: 0;">
					<div class="image-box" v-if="mpInfo.image">
						<image class="image" :src="mpInfo.image" mode="aspectFit"></image>
						<i class="el-icon-delete-solid" @click="deleteImage"></i>
					</div>
					<i v-else class="el-icon-plus image-uploader-icon upload-icon" @click="uploadImage"></i>
				</el-form-item>
			</el-form>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</view>
		<view class="mp-list">
			<view class="mp-item" v-for="(item, index) in mpList" :key="index">
				<image class="pic" :src="item.image" mode="aspectFit" @tap="edit(item)"></image>
				<view class="cate">
					名称：{{item.name}}
				</view>
				<view class="cate">
					qqAppid：{{item.qqAppid}}
				</view>
				<view class="cate">
					wxAppid：{{item.wxAppid}}
				</view>
				<view class="cate">
					排序：{{item.cid}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '',
				mpInfo: {
					qqAppid: '',
					wxAppid: '',
					image: '',
					cid: '',
					name: ''
				},
				loading: false,
				mpList: []
			}
		},
		computed: {
			uploading() {
				return this.loading;
			}
		},
		onLoad() {
			this.getMpList()
		},
		methods: {
			edit(item) {
				uni.showModal({
					title: '提示',
					content: '确定要编辑嘛',
					success: (res) => {
						if(res.confirm) {
							this.mpInfo = item
						}
					}
				})
			},
			getMpList() {
				this.$db('query', 'mp_list', {
					queryItem: {
						limit: 1000
					}
				}).then(res => {
					this.mpList = res.result.data
				})
			},
			uploadImage() {
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res);
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							let cloudPath = res.tempFiles[0].name
							//进行上传操作

							// callback方式，与promise方式二选一即可
							uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: cloudPath,
								onUploadProgress: function(progressEvent) {
									console.log(progressEvent);
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) / progressEvent.total
									);
								},
								success: (res) => {
									this.mpInfo.image = res.fileID
									console.log(this.mpInfo.image)
								},
								fail: (err) => {
									console.log(err)
								},
								complete() {}
							});

						}
					}
				});
			},
			async submitForm() {
				if(!this.mpInfo._id) {
					let res = await this.$db('add', 'mp_list', {
						data: this.mpInfo
					})
					uni.showToast({
						icon: 'none',
						title: '添加成功'
					})
				} else {
					const id = this.mpInfo._id
					delete this.mpInfo._id
					console.log(this.mpInfo)
					let res = await this.$db('update', 'mp_list', {
						doc: id,
						data: this.mpInfo
					})
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					})
				}
				this.getMpList()
				this.mpInfo.cid = ''
				this.mpInfo.wxAppid = ''
				this.mpInfo.qqAppid = ''
				this.mpInfo.image = ''
				this.mpInfo.name = ''
				if(this.mpInfo._id) {
					this.mpInfo._id = ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit-container{
		width: 900rpx;
		margin: 100rpx auto 0;
	}
	.image{
		display: block;
		width: 200rpx;
		height: 200rpx;
		background-color: #f5f5f5;
	}
	.upload-icon{
		width: 200rpx;
		height: 200rpx;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mp-list{
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		background-color: #f5f5f5;
		.mp-item{
			width: 300rpx;
			margin: 20rpx;
			.pic{
				display: block;
				width: 300rpx;
				height: 180rpx;
			}
		}
		.cate{
			font-size: 24rpx;
		}
	}
</style>
